<template>
  <div class="siftGoods" style="animation-duration: 500ms">
    <div class="siftGoods_mian">
      <div style="height:50px"></div>
      <div class="siftTaber">
        <el-card shadow="hover">
          <div class="taber_box">
            <el-radio-group
              v-model="radio"
              @change="changebar"
              style="width: 100%;display: flex;justify-content: space-between;align-items: center;"
            >
              <!-- <el-radio class="elradio" label="1">全部优惠</el-radio> -->
              <el-radio
                class="elradio"
                v-for="item in tabsList"
                :key="item.id"
                :label="item.id"
                >{{ item.name }}
              </el-radio>
            </el-radio-group>
          </div>
          <el-divider></el-divider>
          <div class="search_Box">
            <div class="search_ipt">
              <span style="margin-right:6px">商品价格</span>
              <el-input
                size="mini"
                style="width:90px;line-height:28px"
                v-model="start_price"
              >
                <span style="width:5px;margin-left: 7px;" slot="prefix"
                  >¥</span
                ></el-input
              >
              -
              <el-input
                size="mini"
                style="width:90px;line-height:28px"
                v-model="end_price"
              >
                <span style="width:5px;margin-left: 7px;" slot="prefix"
                  >¥</span
                ></el-input
              >
            </div>
            <div class="search_ipt">
              <span style="margin-right:6px">优惠劵</span>
              <el-input
                size="mini"
                style="width:90px;line-height:28px"
                v-model="start_coupon"
              >
                <span style="width:5px;margin-left: 7px;" slot="prefix"
                  >¥</span
                ></el-input
              >
              -
              <el-input
                size="mini"
                style="width:90px;line-height:28px"
                v-model="end_coupon"
              >
                <span style="width:5px;margin-left: 7px;" slot="prefix"
                  >¥</span
                ></el-input
              >
            </div>
            <div class="search_ipt">
              <span style="margin-right:6px">佣金比例</span>
              <el-input
                size="mini"
                style="width:90px;line-height:28px"
                v-model="start_commission"
              >
                <span style="width:5px;margin-left: 7px;" slot="suffix"
                  >%</span
                ></el-input
              >
              -
              <el-input
                size="mini"
                style="width:90px;line-height:28px"
                v-model="end_commission"
              >
                <span style="width:5px;margin-left: 7px;" slot="suffix"
                  >%</span
                ></el-input
              >
            </div>
            <div class="moneyrate" style="margin-right:6px;font-size: 13px;">
              销量≥
              <el-input
                size="mini"
                style="width:90px;line-height:28px"
                v-model="goods_day_num"
              >
                <!-- <span style="width:5px;margin-left: 7px;" slot="suffix"
                  >%</span -->
                ></el-input
              >
            </div>
            <div style="width: 125px;">
              <el-select v-model="sort" size="mini" placeholder="请选择排序">
                <el-option
                  style="text-align: center;"
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <el-button
              class="search_btn"
              size="small"
              type="primary"
              round
              @click="dosearch"
              ><span style="text-align: center;">
                筛 选
              </span>
            </el-button>
          </div>
        </el-card>
      </div>
      <div class="goods_Box">
        <div v-if="loading">
          <pageloading></pageloading>
        </div>
        <div class="goods_bot" v-if="goodsShow">
          <el-row :gutter="24">
            <el-col
              :span="12"
              class="hover_box2"
              v-for="(item, index) in goodsList"
              :key="index"
            >
              <!-- top标签 -->
              <!-- <div class="position_Box">
                      <img
                        class="topimg2"
                        :src="require('@/assets/images/top_big.png')"
                        alt=""
                      />
                      <div class="top_num2">{{ index + 3 }}</div>
                    </div> -->
              <el-card shadow="always" :body-style="{ padding: '0px' }">
                <div class="top_main2">
                  <div
                    class="demo-image__lazy"
                    style="cursor: pointer;width:220px;height:220px"
                    @click="godetails(item.id)"
                  >
                    <el-image
                      class="elimg2"
                      style="width:220px;height:220px"
                      fit
                      :src="item.goods_img"
                      lazy
                    >
                      <div slot="placeholder" class="image-slot">
                        <!-- 加载中<span class="dot">...</span> -->
                        <!-- <img
                          style="display:inline-block;width:100%;height:100%"
                          :src="require('@/assets/images/download.gif')"
                          alt=""
                          srcset=""
                        /> -->
                        <Goodsloading></Goodsloading>
                      </div>
                    </el-image>
                  </div>
                  <div class="top_right2">
                    <div class="top_roll2">
                      卷后价<span>{{ item.after_coupon_price }}</span
                      >元
                    </div>
                    <div class="top_title2">
                      {{ item.goods_name }}
                    </div>
                    <div class="top_data2">
                      <div>
                        <p>{{ item.goods_day_num }}</p>
                        <p>月销量</p>
                      </div>
                      <div>
                        <p>{{ item.commission_than }}%</p>
                        <p>定向佣金</p>
                      </div>
                      <div>
                        <p>
                          {{
                            (
                              item.goods_price *
                              (item.commission_than / 100)
                            ).toFixed(2)
                          }}
                        </p>
                        <p>佣金</p>
                      </div>
                    </div>
                    <div class="coupon_Box">
                      <a
                        style="cursor: pointer;"
                        :href="item.coupon_url"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <div class="coupon_img">
                          <span>劵:</span>
                          <span style="margin-left:-4px"
                            >¥ {{ parseInt(item.coupon_price) }}</span
                          >
                        </div>
                      </a>
                      <div>
                        已领劵:<span style="color:red">{{
                          item.coupon_collar_count
                        }}</span>
                      </div>
                    </div>
                    <el-progress
                      style="width:200px;margin: 0 auto;"
                      :percentage="
                        (item.coupon_collar_count / item.coupon_num) * 100
                      "
                    ></el-progress>
                  </div>
                  <div class="shops_Box2">
                    <div class="shops_action2">
                      <div class="action_box2">
                        <div class="join_collect2">
                          <el-button
                            class="join_btn12"
                            type="primary"
                            @click="addCollection(item.id)"
                          >
                            <span class="iconimg12"></span>
                            <span>
                              加入收藏
                            </span>
                          </el-button>
                        </div>
                        <div class="copy2">
                          <el-button
                            class="join_btn22"
                            type="primary"
                            @mousedown.native="handleOk2('goodsli' + index)"
                            @click="handleOk('goodsli' + index)"
                          >
                            <span class="iconimg22"></span>
                            <span>
                              复制文案
                            </span>
                          </el-button>
                        </div>
                        <div class="position_hover" :id="'goodsli' + index">
                          <!-- <el-card
                            shadow="always"
                            :body-style="{ padding: '10px' }"
                          > -->
                          <div class="demo-image__lazy">
                            <el-image
                              class="elimghover"
                              fit
                              :src="item.goods_img"
                            >
                            </el-image>
                          </div>
                          <div>{{ item.goods_name }}</div>
                          <div>
                            原价:{{ item.goods_price }}【卷后价:{{
                              item.after_coupon_price
                            }}】 包邮
                          </div>
                          <div>月销量:{{ item.after_coupon_price }}</div>
                          <div>领卷:{{ item.coupon_url }}</div>
                          <div>抢购:{{ item.goods_url }}</div>
                          <!-- </el-card> -->
                        </div>
                      </div>
                    </div>
                    <div class="shops_info22">
                      <el-row :gutter="20">
                        <el-col :span="20"
                          ><div class="disflex">
                            <span class="childone">优惠卷剩余:</span>
                            <div class="childtwo">
                              <span style="color:red">{{
                                item.coupon_collar_count
                              }}</span
                              >/{{ item.coupon_num }}
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="20"
                          ><div class="disflex">
                            <span class="childone">店铺:</span>
                            <span class="childtwo">{{ item.shop_name }}</span>
                          </div>
                        </el-col>
                        <el-col :span="20"
                          ><div class="disflex">
                            <span class="childone">放单人:</span>
                            <span class="childtwo">{{ item.nickname }}</span>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <!-- 分页器 -->
          <!-- @size-change="handleSizeChange" -->
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            background
            :page-size="100"
            :pager-count="11"
            layout="total, prev, pager, next, jumper"
            :total="count"
          >
            <!-- :page-sizes="[100, 200, 300, 400]" -->
          </el-pagination>
        </div>
        <div v-if="nogoodsShow" class="nogoods">
          <div style="padding-top:50px">
            <h3 style="margin-top: 0;padding-top: 25px;">
              抱歉，暂时没有找到合适商品
            </h3>
            <h4 style="margin-top: 0;padding-top: 10px;">
              我们会努力寻找更多的商品哦~
            </h4>
          </div>
          <!-- 精品推荐 -->
          <div class="recommend">
            <div class="recommend_top">
              <span>
                精品推荐
              </span>
            </div>
            <el-divider>为你推荐优质好货</el-divider>
            <div class="goods_bot">
              <el-row :gutter="24">
                <el-col
                  :span="12"
                  class="hover_box2"
                  v-for="(item, index) in tjlist"
                  :key="index"
                >
                  <!-- top标签 -->
                  <!-- <div class="position_Box">
                      <img
                        class="topimg2"
                        :src="require('@/assets/images/top_big.png')"
                        alt=""
                      />
                      <div class="top_num2">{{ index + 3 }}</div>
                    </div> -->
                  <el-card shadow="always" :body-style="{ padding: '0px' }">
                    <div class="top_main2">
                      <div
                        class="demo-image__lazy"
                        style="cursor: pointer;width:220px;height:220px"
                        @click="godetails(item.id)"
                      >
                        <el-image
                          class="elimg2"
                          style="width:220px;height:220px"
                          fit
                          :src="item.goods_img"
                          lazy
                        >
                          <div slot="placeholder" class="image-slot">
                            <Goodsloading></Goodsloading>
                          </div>
                        </el-image>
                      </div>
                      <div class="top_right2">
                        <div class="top_roll2">
                          卷后价<span>{{ item.after_coupon_price }}</span
                          >元
                        </div>
                        <div class="top_title2">
                          {{ item.goods_name }}
                        </div>
                        <div class="top_data2">
                          <div>
                            <p>{{ item.goods_day_num }}</p>
                            <p>月销量</p>
                          </div>
                          <div>
                            <p>{{ item.commission_than }}%</p>
                            <p>定向佣金</p>
                          </div>
                          <div>
                            <p>
                              {{
                                (
                                  item.goods_price *
                                  (item.commission_than / 100)
                                ).toFixed(2)
                              }}
                            </p>
                            <p>佣金</p>
                          </div>
                        </div>
                        <div class="coupon_Box">
                          <a
                            style="cursor: pointer;"
                            :href="item.coupon_url"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            <div class="coupon_img">
                              <span>劵:</span>
                              <span style="margin-left:-4px"
                                >¥ {{ parseInt(item.coupon_price) }}</span
                              >
                            </div>
                          </a>
                          <div>
                            已领劵:<span style="color:red">{{
                              item.coupon_collar_count
                            }}</span>
                          </div>
                        </div>
                        <el-progress
                          style="width:200px;margin: 0 auto;"
                          :percentage="
                            (item.coupon_collar_count / item.coupon_num) * 100
                          "
                        ></el-progress>
                      </div>
                      <div class="shops_Box2">
                        <div class="shops_action2">
                          <div class="action_box2">
                            <div class="join_collect2">
                              <el-button
                                class="join_btn12"
                                type="primary"
                                @click="addCollection(item.id)"
                              >
                                <span class="iconimg12"></span>
                                <span>
                                  加入收藏
                                </span>
                              </el-button>
                            </div>
                            <div class="copy2">
                              <el-button
                                class="join_btn22"
                                type="primary"
                                @mousedown.native="
                                  handleOk2('goodslis' + index)
                                "
                                @click="handleOk('goodslis' + index)"
                              >
                                <span class="iconimg22"></span>
                                <span>
                                  复制文案
                                </span>
                              </el-button>
                            </div>
                            <div
                              class="position_hover"
                              :id="'goodslis' + index"
                            >
                              <!-- <el-card
                                shadow="always"
                                :body-style="{ padding: '10px' }"
                              > -->
                              <div class="demo-image__lazy">
                                <el-image
                                  class="elimghover"
                                  fit
                                  :src="item.goods_img"
                                >
                                </el-image>
                              </div>
                              <div>{{ item.goods_name }}</div>
                              <div>
                                原价:{{ item.goods_price }}【卷后价:{{
                                  item.after_coupon_price
                                }}】 包邮
                              </div>
                              <div>月销量:{{ item.after_coupon_price }}</div>
                              <div>领卷:{{ item.coupon_url }}</div>
                              <div>抢购:{{ item.goods_url }}</div>
                              <!-- </el-card> -->
                            </div>
                          </div>
                        </div>
                        <div class="shops_info22">
                          <el-row :gutter="20">
                            <el-col :span="20">
                              <div class="disflex">
                                <span class="childone">优惠卷剩余:</span>
                                <div class="childtwo">
                                  <span style="color:red">{{
                                    item.coupon_collar_count
                                  }}</span
                                  >/{{ item.coupon_num }}
                                </div>
                              </div>
                            </el-col>
                            <el-col :span="20"
                              ><div class="disflex">
                                <span class="childone">店铺:</span>
                                <span class="childtwo">{{
                                  item.shop_name
                                }}</span>
                              </div>
                            </el-col>
                            <el-col :span="20"
                              ><div class="disflex">
                                <span class="childone">放单人:</span>
                                <span class="childtwo">{{
                                  item.nickname
                                }}</span>
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Goodsloading from "@/components/Goodsloading.vue";
import pageloading from "@/components/pageloading.vue";
// import { getClassInfo, getGoodsList } from "@/api/local/goods";
import { getClassInfo, getGoodsList } from "@/api/goods/goods";
import { addCollection } from "@/api/user/user";
export default {
  name: "siftGoods",
  components: {
    Goodsloading,
    pageloading
  },
  data() {
    return {
      currentPage: 1,
      count: 0,
      loading: true,
      goodsShow: "",
      nogoodsShow: "",
      goods_name: "",
      class_id: "",
      start_price: "",
      end_price: "",
      start_coupon: "",
      end_coupon: "",
      start_commission: "",
      end_commission: "",
      goods_day_num: "",
      radio: "0",
      tabsList: [
        {
          id: 0,
          name: "所有分类"
        }
      ],
      goodsList: [
        // {
        //   id: 1, //商品id
        //   goods_name: "【明星同款】Champion带标 短袖T恤 经典刺秀 男女款", //商品名称
        //   goods_img: require("@/assets/images/goodsimg.jpg"), // 商品主图
        //   goods_price: "30.00", // 商品单价
        //   after_coupon_price: "40.00", // 卷后单价
        //   commission_than: "10", // 佣金比例
        //   coupon_collar_count: 0, // 优惠卷领取数量
        //   goods_day_num: 0, //月销量
        //   coupon_num: 10, // 优惠卷总量
        //   shop_name: "测试店铺" //店铺名称
        // }
      ],
      options: [
        {
          value: "1",
          label: "最新上架"
        },
        {
          value: "2",
          label: "月销量"
        },
        {
          value: "3",
          label: "领劵量"
        },
        {
          value: "4",
          label: "佣金比例"
        },
        {
          value: "5",
          label: "价格"
        }
      ],
      tjlist: [],
      sort: "",
      userid: ""
    };
  },
  computed: {},
  created() {
    if (this.$ls.get("userinfo")) {
      // console.log(this.$ls.get("userinfo").id);
      this.userid = this.$ls.get("userinfo").id;
    }
    if (this.$ls.get("goodsname")) {
      console.log(this.$ls.get("goodsname"));
      this.goods_name = this.$ls.get("goodsname");
      this.getGoodsList({
        goods_name: this.$ls.get("goodsname"),
        user_id: this.userid
      });
    } else {
      this.getGoodsList({});
    }
    this.getClassInfo();
  },
  mounted() {},
  methods: {
    handleOk2(val) {
      // console.log(val);
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection();
        const range = document.createRange();
        console.log(document.getElementById(val));
        range.selectNode(document.getElementById(val)); //传入dom
        selection.addRange(range);
        document.execCommand("copy");
        // this.$message.success("复制成功");
        selection.removeAllRanges();
      });
    },
    handleOk(val) {
      console.log(val);
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection();
        const range = document.createRange();
        console.log(document.getElementById(val));
        range.selectNode(document.getElementById(val)); //传入dom
        selection.addRange(range);
        document.execCommand("copy");
        this.$message.success("复制成功");
        selection.removeAllRanges();
      });
    },
    //加入收藏
    addCollection(goods_id) {
      console.log(goods_id);
      addCollection({
        goods_id: goods_id
      })
        .then(res => {
          if (res.code == 200) {
            console.log("返回", res);
            this.$message.success("收藏成功!");
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.dosearch();
    },
    search(e) {
      e.user_id = this.userid;
      console.log("e", e);
      this.getGoodsList(e);
    },
    dosearch() {
      const parameter = {};
      if (this.start_price !== "") {
        parameter.start_price = this.start_price;
      }
      if (this.end_price !== "") {
        parameter.end_price = this.end_price;
      }
      if (this.start_coupon !== "") {
        parameter.start_coupon = this.start_coupon;
      }
      if (this.end_coupon !== "") {
        parameter.end_coupon = this.end_coupon;
      }
      if (this.start_commission !== "") {
        parameter.start_commission = this.start_commission;
      }
      if (this.end_commission !== "") {
        parameter.end_commission = this.end_commission;
      }
      if (this.goods_day_num !== "") {
        parameter.goods_day_num = this.goods_day_num;
      }
      if (this.sort !== "") {
        parameter.sort = this.sort;
      }
      if (this.class_id !== "") {
        parameter.class_id = this.class_id;
      }
      if (this.goods_name !== "") {
        parameter.goods_name = this.goods_name;
      }
      if (this.user_id !== "") {
        parameter.user_id = this.user_id;
      }
      console.log(parameter);
      this.getGoodsList(parameter);
    },
    getGoodsList(parameter) {
      this.loading = true;
      this.goodsShow = "";
      this.nogoodsShow = "";
      getGoodsList({
        page: this.currentPage,
        pagesize: 100,
        class_id: parameter.class_id ? parameter.class_id : undefined, //分类id 根据id获取对应的商品
        start_price: parameter.start_price ? parameter.start_price : undefined, //  根据价格进行区间查询 起始 金额
        end_price: parameter.end_price ? parameter.end_price : undefined, //根据价格进行区间查询 结束 金额
        start_coupon: parameter.start_coupon
          ? parameter.start_coupon
          : undefined, //  优惠价面额区间查询 起始 金额
        end_coupon: parameter.end_coupon ? parameter.end_coupon : undefined, //  优惠价面额区间查询 结束 金额
        start_commission: parameter.start_commission
          ? parameter.start_commission
          : undefined, //   佣金比例区间查询 起始 金额
        end_commission: parameter.end_commission
          ? parameter.end_commission
          : undefined, //  佣金比例区间查询 结束金额
        goods_day_num: parameter.goods_day_num
          ? parameter.goods_day_num
          : undefined, //  销量查询
        sort: parameter.sort === "" ? parameter.sort : undefined, //排序 1=最新上架 2=月销量 3=领卷量 4=佣金比例 5 价格
        goods_name: parameter.goods_name ? parameter.goods_name : undefined, //商品名称
        shop_name: parameter.shop_name ? parameter.shop_name : undefined, //店铺名称
        goods_id: parameter.goods_id ? parameter.goods_id : undefined, //商品表自增id
        user_id: parameter.user_id ? parameter.user_id : undefined //商品表自增id
      })
        .then(res => {
          document.body.scrollTop = 0;
          document.documentElement.scrollTop = 0;
          this.loading = false;
          this.count = res.data.count;
          console.log("商品列表", res);
          this.goodsList = res.data.data;
          if (this.goodsList.length > 0) {
            this.goodsShow = true;
            this.nogoodsShow = false;
          } else {
            this.goodsShow = false;
            this.nogoodsShow = true;
            this.tjlist = res.data.goods_array;
          }
          if (this.$ls.get("goodsname")) {
            this.$ls.remove("goodsname");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getClassInfo() {
      this.tabsList = [
        {
          id: "0",
          name: "所有分类"
        }
      ];
      getClassInfo()
        .then(res => {
          console.log("商品分类", res);
          this.tabsList.push(...res.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    changebar(e) {
      console.log("taber_box", e);
      this.class_id = e;
      this.getGoodsList({
        class_id: e
      });
    },
    godetails(id) {
      let routes = this.$router.resolve({
        path: "/optimGoods/goodsDetails",
        query: { id: id }
      });
      window.open(routes.href, "_blank");
    }
  }
};
</script>

<style lang="less" scoped>
@keyframes landr {
  0% {
    transform: rotate(0deg);
    transform-origin: right bottom 0;
  }
  39% {
    transform: rotate(5deg);
    transform-origin: right bottom 0;
  }
  40% {
    transform: rotate(5deg);
    transform-origin: left bottom 0;
  }
  75% {
    transform: rotate(-10deg);
    transform-origin: left bottom 0;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: left bottom 0;
  }
}
@-webkit-keyframes landr {
  0% {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: right bottom 0;
  }
  39% {
    -webkit-transform: rotate(5deg);
    webkit-transform-origin: right bottom 0;
  }
  40% {
    -webkit-transform: rotate(5deg);
    -webkit-transform-origin: left bottom 0;
  }
  75% {
    -webkit-transform: rotate(-10deg);
    -webkit-transform-origin: left bottom 0;
  }
  100% {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: left bottom 0;
  }
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.loading {
  width: 1200px;
  height: 500px;
  margin: 0 auto;
}
.disflex {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 10px;
  text-align: left;
  .childone {
    display: inline-block;
    width: 150px !important;
  }
  .childtwo {
    text-align: right;
    white-space: nowrap;
  }
}
.siftGoods {
  width: 100%;
  background: url("~@/assets/images/bluebg.png") no-repeat center;
  background-position: top;
  .siftGoods_mian {
    width: 1200px;
    margin: 0 auto;
    .siftTaber {
      border-radius: 14px;
      overflow: hidden;
      margin-top: 25px;
      .taber_box ::v-deep {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .elradio {
          padding: 5px;
          margin-right: 0;
        }
        .el-radio-group {
          display: flex;
          flex-wrap: wrap;
          font-size: 18px;
        }
        .el-radio__label {
          font-size: 14px;
          // padding-bottom: 10px;
        }
        .el-radio__inner {
          display: none;
        }
      }
      .search_Box::v-deep {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search_ipt {
          font-size: 12px;
          .el-input__inner {
            border-radius: 12px;
          }
        }
        .moneyrate {
          .el-input__inner {
            border-radius: 12px;
          }
        }
        .search_btn {
          font-size: 15px;
        }
        .el-radio__inner {
          display: none;
          border-radius: 20px;
        }
      }
    }
    .goods_Box {
      width: 100%;
      // height: 500px;
      // position: relative;
      margin-top: 20px;
      margin-bottom: 20px;
      .goods_bot {
        position: relative;
        .hover_box2 {
          position: relative;
          width: 243px;
          border-radius: 12px;
          margin-bottom: 20px;
          display: flex;
          display: -webkit-flex;
          flex-direction: row;
          flex-wrap: wrap;
          .topimg2 {
            position: absolute;
            top: -8px;
            left: 20px;
            z-index: 2;
          }
          .top_num2 {
            position: absolute;
            top: 18px;
            left: 43px;
            font-size: 23px;
            color: #ffffff;
            z-index: 3;
          }
          // .elimg2 {
          //   width: 220px;
          //   // height: 220px;
          // }
          .top_main2 {
            background-color: #fff;
            // height: 220px;
            // display: flex;
            // justify-content: space-around;
            // align-items: center;
            .top_right2 {
              padding-top: 10px;
              // width: 220px;
              font-size: 13px;
              margin: 0 auto;
              padding-bottom: 20px;
              .top_title2 {
                width: 200px;
                height: 16px;
                margin: 3px auto;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding-top: 8px;
                padding-bottom: 8px;
                a {
                  margin-left: 8px;
                  margin-right: 8px;
                  font-size: 14px;
                  text-decoration: none;
                }
              }
              .top_roll2 {
                padding-top: 8px;
                padding-bottom: 8px;
                width: 150px;
                height: 25px;
                line-height: 25px;
                border-radius: 8px;
                margin: 0 auto;
                background-color: rgba(148, 144, 144, 0.1);
                span {
                  font-size: 16px;
                  margin-left: 5px;
                  margin-right: 5px;
                  color: #ff4215;
                  font-weight: bold;
                }
              }
              .top_data2 {
                height: 70px;
                font-size: 13px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                p {
                  margin-top: 0 !important;
                  margin-bottom: 0 !important;
                }
                p:first-child {
                  color: #333;
                  font-size: 16px;
                  font-weight: bold;
                }
              }
            }
          }
          .shops_Box2 {
            // width: 100%;
            .shops_action2 {
              position: absolute;
              top: 220px;
              left: 13px;
              z-index: -11;
              opacity: 0;
              transition: all 1s initial;
              .action_box2 {
                width: 217px;
                display: flex;
                // justify-content: space-betwe;
                align-items: center;
                .join_collect2 {
                  background-color: #fb522b;
                  overflow: hidden;
                  border-top-left-radius: 10px;
                  .join_btn12 {
                    background-color: #fb522b;
                    border: none;
                    margin: 0 auto;
                    .iconimg12 {
                      display: inline-block;
                      width: 17px;
                      height: 15px;
                      overflow: hidden;
                      margin-left: -8px;
                      background: url("~@/assets/images/icon_a.png");
                      background-position: 37px -1px;
                      // object-fit: cover;
                      transform: scale(1);
                      transition: all 0.3s initial;
                    }
                  }
                }
                .join_collect2:hover {
                  span {
                    color: #ff9;
                  }
                  .iconimg12 {
                    // transform: translate(1px);
                    // transform: scale(1.3);
                    animation: landr 0.8s ease-in-out;
                  }
                }
                .copy2 {
                  background-color: rgb(255, 129, 48);
                  overflow: hidden;
                  border-top-right-radius: 10px;
                  .join_btn22 {
                    background-color: rgb(255, 129, 48);
                    border: none;
                    .iconimg22 {
                      display: inline-block;
                      width: 17px;
                      height: 15px;
                      overflow: hidden;
                      margin-left: -8px;
                      background: url("~@/assets/images/icon_a.png");
                      background-position: 39px -22px;
                      // object-fit: cover;
                      transform: scale(1);
                      // transition: all 0.3s initial;
                    }
                  }
                }
                .position_hover {
                  border-radius: 12px;
                  box-sizing: border-box;
                  padding: 10px;
                  color: white;
                  background-color: #00000075;
                  display: none;
                  position: absolute;
                  top: -100px;
                  left: 225px;
                  width: 300px;
                  text-align: left;
                  // word-break: keep-all;
                  // white-space: nowrap;
                  font-size: 12px;
                  opacity: 0;
                  z-index: -999;
                  .elimghover {
                    width: 80px;
                  }
                }
                .copy2:hover + .position_hover {
                  display: block;
                  opacity: 1;
                  z-index: 999999;
                }
                .copy2:hover {
                  span {
                    color: #ff9;
                  }
                  .iconimg22 {
                    // transform: translateX(1px), translatey(1px);
                    // transform: scale(1.3);
                    animation: landr 0.8s ease-in-out;
                  }
                }
              }
            }
            .shops_info22 {
              position: absolute;
              top: 370px;
              left: 12px;
              width: 217px;
              height: 70px;
              font-size: 12px;
              background-color: #fff;
              border-bottom-right-radius: 10px;
              border-bottom-left-radius: 10px;
              z-index: -1;
              border-bottom: 1px solid #ebeef5;
              border-left: 1px solid #ebeef5;
              border-right: 1px solid #ebeef5;
              transition: all 1s initial;
              padding-bottom: 12px;
              display: flex;
              align-items: center;
              div {
                width: 100%;
                padding-top: 5px;
              }
            }
          }
        }
        .hover_box2:hover {
          .shops_Box2 {
            .shops_action2 {
              transition: all 300ms ease;
              -moz-transition: all 300ms ease;
              -webkit-transition: all 300ms ease;
              top: 180px;
              opacity: 1;
              z-index: 6;
            }
            .shops_info22 {
              transition: all 300ms ease;
              -moz-transition: all 300ms ease;
              -webkit-transition: all 300ms ease;
              top: 449px;
              opacity: 1;
              z-index: 5;
            }
          }
        }
      }
      /* 公共样式 */
      // 优惠卷
      .coupon_Box {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 25px;
        line-height: 25px;
        margin-bottom: 10px;
        .coupon_img {
          display: flex;
          justify-content: space-around;
          align-items: center;
          width: 65px;
          height: 25px;
          background: url("~@/assets/images/sale_box.png") no-repeat center;
          color: white;
        }
      }
      .nogoods {
        margin-top: 50px;
        width: 1200px;
        // line-height: 200px;
        background: url("~@/assets/images/nogoods.png") no-repeat center;
        background-position-y: 20px;
        background-position-x: 300px;
        background-color: #f6f6f6;
        h3 {
          margin-left: 260px;
        }
        h4 {
          margin-left: 260px;
          padding-bottom: 100px;
        }
        .recommend::v-deep {
          margin-top: 20px;
          .recommend_top {
            width: 500px;
            margin: 0 auto;
            background: url("~@/assets/images/th_pat_y.png");
            background-repeat: repeat-x !important;
            background-position: 50%;
            span {
              display: inline-block;
              width: 120px;
              font-size: 24px;
              background-color: #ecfbf6;
            }
          }
          .el-divider__text {
            background-color: #ecfbf6;
          }
        }
      }
    }
  }
}
</style>
